@extends('home.wechat.layouts.app')
@section('content')
    <div class="cart-index" id="more" @if (!$carts->isEmpty()) style="display: none;" @endif>
        @include('home.wechat.layouts._header')

        <div style="height:1rem;"></div>

        <div class="cart-index-wrap">
            <div class="empt">
                <div class="b3">
                    <a href="/wechat/product/category" class="ui-button ui-button-disable">
                        <span>全部商品</span>
                    </a>
                    <a href="/" class="ui-button">
                        <span>精选商品</span>
                    </a>
                </div>
            </div>
        </div>
    </div>



    <div class="cart-index" id="carts"  @if ($carts->isEmpty()) style="display: none;" @endif>
        @include('home.wechat.layouts._header')

        <div class="cart-index-wrap">
            <div class="cart-list">
                <ul>
                    @foreach($carts as $cart)
                    <li class="item">
                        <div class="ui-box">
                            <div class="imgProduct"><a href="/wechat/product/{{$cart->product->id}}"><img
                                            src="{{$cart->product->thumb}}"></a></div>
                            <div class="info ui-box-flex">
                                <div class="name">
                                    <span>{{$cart->product->name}}</span>
                                </div>
                                <div class="price">
                                    <p>
                                        <span>售价：</span><span>{{$cart->product->price}}元</span>
                                        <span>合计：</span><span class="hj">{{doubleval($cart->product->price*$cart->num)}}元</span>
                                    </p>
                                    {{--<div class="tip">
                                        <span style="display: none;">请于2016/04/11 00:58前下单，逾期将失效。</span>
                                    </div>--}}
                                </div>
                                <div class="num" data-id="{{$cart->id}}" data-price="{{$cart->product->price}}">
                                    <div class="xm-input-number">
                                        <div class="input-sub @if($cart->num > 1) active @endif" ></div>
                                        <div class="input-num"><span>{{$cart->num}}</span></div>
                                        <div class="input-add active"></div>
                                    </div>
                                    <div class="delete">
                                        <a href="javascript:;">
                                            <span class="icon-iconfontshanchu"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="append"></div>
                    </li>
                   @endforeach

                </ul>
            </div>
            <div class="pointBox">
                <div class="point" style="display: none;"><span class="act act_special">包邮</span><span></span></div>
                <div class="point">
                    <p>温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</p>
                </div>
            </div>

            <!-- Navbar -->
            <div class="bottom-submit ui-box">
                <div class="price">
                    <span id="num">共{{$count['num']}}件 金额：</span><br>
                    <strong id="total_price">{{$count['totalPrice']}}</strong><span>元</span></div>
                <div class="btn"><a class="ui-button ui-button-disable"
                                    href="/wechat/product/category"><span>继续购物</span></a></div>
                <div class="btn"><a class="ui-button"
                                    href="/wechat/order/checkout"><span>去结算</span></a></div>
            </div>
        </div>
    </div>
    @endsection

@section('js')
    <script>
        $(function(){
            //增加数量
                $('.input-add.active').click(function(){
                    var _this=$(this);
                    var $num = _this.siblings('.input-num').children('span');
                    var $sub = _this.siblings('.input-sub');
                    var price = _this.parents(".num").data('price');

                    //点击增加后，数量增加1
                    var num=parseInt($num.text())+1;
                    $num.text(num);

                    //更改数量后，合计价格更改
                    hj=num*price;
                    _this.parents('.info').find('.hj').text(hj + '元');

                    //点击增加后，-号按钮变为高亮状态
                    if (!$sub.hasClass('active')) {
                        $sub.addClass('active');
                    }

                    //用ajax发送到服务端 对数据库进行修改
                    $.ajax({
                        type:'PATCH',
                        url:'/wechat/carts/change_num',
                        data:{
                            type:'add',
                            id: _this.parents(".num").data('id'),
                        },
                        //成功后，根据返回的数据，对总数量和总价进行修改
                        success:function(data){
                            console.log(data);
                            $('#num').text("共" + data.num + "件 金额:");
                            $('#total_price').text(data.totalPrice);
                        }
                    })
                })

            //减少数量  动态绑定事件
            $(document).on('click','.input-sub.active',function(){
                var _this=$(this);
                var $num = _this.siblings('.input-num').children('span');
                var price = _this.parents(".num").data('price');

                var num=parseInt($num.text());

                //点击减少后，数量减少1
                var num=parseInt($num.text())-1;
                $num.text(num);

                //更改数量后，合计价格更改
                hj=num*price;
                _this.parents('.info').find('.hj').text(hj + '元');

                //点击-号后，如果数量等于1 -号灰置不可点击
                if (num==1) {
                    _this.removeClass('active');
                }

                //用ajax发送到服务端 对数据库进行修改
                $.ajax({
                    type:'PATCH',
                    url:'/wechat/carts/change_num',
                    data:{
                        type:'sub',
                        id: _this.parents(".num").data('id'),
                    },
                    //成功后，根据返回的数据，对总数量和总价进行修改
                    success:function(data){
                        console.log(data);
                        $('#num').text("共" + data.num + "件 金额:");
                        $('#total_price').text(data.totalPrice);
                    }
                })
            })


            //删除购物车商品
            $('.icon-iconfontshanchu').click(function(){
                var _this=$(this);

                var cart_id=$(this).parents('.num').data('id');


                //用ajax实现服务器上删除对应cart_id的商品
                $.ajax({
                    type:'delete',
                    url:'/wechat/carts/delete_cart',
                    data:{cart_id:cart_id},
                    //成功后，判断购物车还有多少商品，如果为1 (最后一个被移除后 显示more模块)
                    success:function(data){
                        var length = $(".item").length;
                        console.log(length);
                        if (length == 1) {
                            $('#carts').hide();
                            $('#more').show();
                            return false;
                        }
                        $("#num").text("共" + data.num + "件 金额:");
                        $("#total_price").text(data.totalPrice);

                        _this.parents('.item').remove();
                    }
                })

            })

        })
    </script>
    @endsection